<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(item, index) in highLevelInfo"
        :key="index"
        :title="item.dimensionName"
        :name="index"
      >
        <div style="display: flex;flex-direction: column;">
          <div v-if="item.developmentStatus" class="suggest-item-title-view">
            <div class="suggest-item-title-top" />
            <div class="suggest-item-title">发育里程碑:</div>
          </div>
          <div v-if="item.developmentStatus" class="suggest-item-content">{{ item.developmentStatus }}</div>
          <div class="suggest--exline" />

          <div v-if="item.observation" class="suggest-item-title-view">
            <div class="suggest-item-title-top" />
            <div class="suggest-item-title">重点观察项:</div>
          </div>
          <div v-if="item.observation" class="suggest-item-title" style="margin-top: 10px;margin-left: 10px;">
            {{ item.observation }}
          </div>
          <div v-if="item.observation" class="suggest--exline" style="margin-top: 10px;" />

          <div v-if="item.guide" class="suggest-item-title-view">
            <div class="suggest-item-title-top" />
            <div class="suggest-item-title">指导方案:</div>
          </div>
          <div v-if="item.guide" class="suggest-item-content">{{ item.guide }}</div>

          <div v-if="item.bringUp" class="suggest-item-title-view">
            <div class="suggest-item-title-top" />
            <div class="suggest-item-title">能力拓展:</div>
          </div>
          <div v-if="item.bringUp" class="suggest-item-content">{{ item.bringUp }}</div>

          <div v-if="item.parentManual" class="suggest-item-title-view">
            <div class="suggest-item-title-top" />
            <div class="suggest-item-title">家长手册:</div>
          </div>
          <div v-if="item.parentManual" class="suggest-item-content">{{ item.parentManual }}</div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'AssessHighLevel',
  props: {
    highLevelInfo: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      activeNames: [0, 1, 2, 3, 4]
    }
  }
}
</script>

<style scoped lang="scss">
  .suggest-item-title-view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .suggest-item-title-top {
    width: 5px;
    height: 7.5px;
    background-color: rgba(250, 203, 47, 1);
    opacity: 1;
    margin-right: 5px;
  }

  .suggest-item-title {
    font-size: 15px;
    font-weight: bold;
    line-height: 21px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
  }

  .suggest-item-content {
    font-size: 15px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    opacity: 1;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
  }

  .suggest--exline {
    height: 1px;
    overflow: hidden;
    margin-bottom: 20px;
  }
</style>
